<template>
  <div class="circle" v-if="agentCount.length > 0">
    <div class="one gh"><span class="arc"></span>
      <div class="info">
        <div class="icon">
          <i class="iconfont icon-diyiming i1"></i>
        </div>
        <div class="text">
          <span class="label">{{ agentCount[0].name }}</span>
          <span class="number">{{ agentCount[0].money }}元</span>
        </div>
      </div>
    </div>

    <div class="two gh"><span class="ellipse"></span><span class="arc"></span>
      <div class="info">
        <div class="icon">
          <i class="iconfont icon-dierming i2"></i>
        </div>
        <div class="text">
          <span class="label">{{  agentCount[1].name  }}</span>
          <span class="number"> {{  agentCount[1].money  }} 元</span>
        </div>
      </div>
    </div>
    <div class="three gh"><span class="ellipse"></span><span class="arc"></span>
      <div class="info">
        <div class="icon">
          <i class="iconfont icon-disanming i3"></i>
        </div>
        <div class="text">
          <span class="label">{{  agentCount[2].name }}</span>
          <span class="number">{{ agentCount[2].money }}元</span>
        </div>
      </div>
    </div>
    <!-- <div class="four gh"><span class="ellipse"></span><span class="arc"></span>
      <div class="info">
        <div class="icon">
          <i class="iconfont icon-yuqi02"></i>
        </div>
        <div class="text">
          <span class="label">套餐逾期</span>
          <span class="number">1221</span>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import * as API from '@/api'
  export default {
    created(){
      this.getData()
      this.switper();
    },
  beforeDestroy() {
    this.clearData();
  },
    data() {
      return {
        agentCount: [],
        timer: null
      }
    },
    methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        1 * 60 * 1000
      );
    },
      getData(){
        API.POST('/admin/screen/agent_stat').then(res => {
          if(res.code === 1){
            this.agentCount = [...res.data]
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
.circle {
  width: 480px;
  height: 100%;
  font-size: 20px;

  .gh {
    border-style: solid;
    height: 0;
    margin: 0 auto;
    position: relative;
  }

  .info {
    position: absolute;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    width: 100%;
    .icon {
      margin-right: 10px;
      i {
        font-size: 32px;
        padding: 6px;
        border-radius: 50%;
        text-shadow: none;
      }
    }
    .text {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      .number {
        margin-left: 10px;
        margin-top:8px;
      }
    }
  }

  .arc {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 6px;
    border-radius: 50%;
  }

  .ellipse {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 8px;
    border-radius: 50%;
    top: -3px;
  }

  .one {
    border-color: transparent transparent #cda01e transparent;
    border-width: 0 12px 70px 12px;
    width: 363px;

    .arc {
      bottom: -73px;
        width: 385px;
        background-color: #cda01e;
    }

    .info {
      top: 10px;
      left: 45px;
    }
  }

  .two {
    border-color: transparent transparent #8540f6 transparent;
    border-width: 10px 12px 76px 12px;
    width: 390px;

    .arc {
      bottom: -79px;
      width: 412px;
      background-color: #8540f6;
    }

    .info {
      top: 18px;
      left: 55px;
    }

    .ellipse {
      width: 393px;
      background-color: #4511a2;
    }
  }

  .three {
    border-color: transparent transparent #4b78f2 transparent;
    border-width: 10px 12px 80px 12px;
    width: 418px;

    .arc {
      bottom: -83px;
      width: 442px;
      background-color: #4b78f2;
    }

    .info {
      top: 20px;
      left: 66px;
    }

    .ellipse {
      width: 424px;
      background-color: #1f4094;
    }
  }

  .four {
    border-color: transparent transparent #b6485b transparent;
    border-width: 10px 12px 60px 12px;
    width: 430px;

    .arc {
      bottom: -63px;
      width: 449px;
      background-color: #b6485b;
    }

    .info {
      top: 20px;
      left: 77px;
    }

    .ellipse {
      height: 8px;
      top: -2px;
      width: 438px;
      background-color: #006384;
    }
  }
}
.i1 {
  color: #eee221;
}
.i2 {
  color: #7cb9b6;
}
.i3 {
  color:  #d5ae87;
}
</style>
